<template>
  <div id="layer-content">
    <el-container>
      <el-main>
        <el-form :model="form" ref="form" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="父菜单" prop="pid">
                <SelectTree :props='{value:"id",label:"name",children:"children"}' :options='menuTreelist' :value='form.pid' :defaultExpandedKeys="[1]" :accordion='true' @getValue='selectTreeOnSelect($event)' />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单名称" :required="true" prop="name" :rules="[
                { required: true, message: '菜单名称不能为空'},
                { type: 'string', max: 10,  message: '菜单名称长度不能超过10位'}
              ]">
                <el-input v-model="form.name" placeholder="请输入菜单名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="组件路径" :required="true" prop="url" :rules="[
                { required: true, message: '组件路径不能为空'},
                { type: 'string', max: 30,  message: '组件路径不能超过30位'}
              ]">
                <el-input v-model="form.url" placeholder="请输入密码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="图标" prop="icon" :rules="[
                { type: 'string', max: 10,  message: '图标长度不能超过10位'}
              ]">
                <el-input v-model="form.icon" placeholder="请输入图标"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否使用" :required="true" prop="isUse">
                <el-radio-group v-model="form.isUse" size="medium">
                  <el-radio-button label="1">是</el-radio-button>
                  <el-radio-button label="0">否</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer>
        <el-row id="layer-footerBtn">
          <el-button type="primary" @click="submit('form')">确定</el-button>
          <el-button @click="cancel('form')">取消</el-button>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import SelectTree from '@/components/SelectTree';
import menuListRes from '@/api/sysMenu/listTree.json';
export default {
  props: {
    layerid: {
      type: String
    }
  },
  components: { SelectTree },
  created () {
    const fatherMenu = [{
      id: 1,
      name: '顶级',
      children: menuListRes.data
    }]
    this.menuTreelist = fatherMenu;
  },
  data () {
    return {
      isCommit: false, // 用于验证重复提交
      form: {
        name: '',
        icon: '',
        url: '',
        isUse: '1',
        pid: 1
      },
      menuTreelist: {

      }
    }
  },
  methods: {
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid || this.isCommit === true) {
          return;
        }
        this.$http.post('http://rap2.taobao.org:38080/app/mock/257330/user/add', this.form).then(res => {
          if (res.data.code === 200) {
            this.$layer.msg('操作成功');
            this.$layer.close(this.layerid);
            this.$parent.getTableData();
          } else {
            this.$layer.msg(res.data.msg);
          }
        }).finally(() => {
          this.isCommit = false;
        })
      });
    },
    cancel (formName) {
      this.$refs[formName].resetFields();
      this.$layer.close(this.layerid);
    },
    selectTreeOnSelect (value) {
      console.log(value)
      this.valueId = value;
    }
  }
}

</script>
<style rel="stylesheet/scss" lang="scss">
.el-select {
  width: 100%;
}
</style>
